新的講者在 Sky 工作,要來跟我們講怎麼做有邏輯判斷的互動設計。
這次會做三個範例:
來吧!
選擇這 Settings 這個 Scene 。
接著我們主要會使用之前用過很多次的輸入欄位:名字、密碼、密碼確認,這三個。
(我已經把名稱改為「您的名字」、「您的密碼」與「請再次輸入密碼」)
以及一個 Error 的 layer ,會在我們密碼兩次輸入不同的時候,作為提示用。
我們先選擇「您的密碼」。
選擇 Focus 這個 Trigger ,設定為 Focus Out 給 「請再次輸入密碼」。
接著點開平常點 Response 的地方,拉到最下面就是 Condition 。
我們想要判斷兩個密碼輸入是否相同,因此先選擇「您的密碼」。
接著選擇判斷 text 。
(這邊突然發現可以判斷的東西好多,位置、透明度、圓角...等)
然後選擇「=」等於。(已經是預設)
再來選擇「請再次輸入密碼」。
這邊一樣選擇判斷 text。
這邊的判斷式,代表兩個密碼輸入完全相同的時候,我們希望 Error 這個 Layer 透明度為0 。
所以我們就在底下加上一個 Opacity 的Response 。
輸入 Error 就能搜尋到(如果 Layer 很多,命名清楚就很方便)。
那如果兩個密碼「=/=」不等於的時候呢?
這時候我們只要同時選擇剛剛做完的 Condition ,按 cmd+c 複製再按 cmd+d 貼上,就能直接改設定了。
把第二個 Condition 改為不等於。
第二個 Opacity 改為 100 。(透明度100就會出現的意思)
這兩個 Condition 這樣很容易混亂,所以 ProtoPie 提供你改名的機制,我們就來改一下。
用 Preview 看一下,果然長度不同的時候,就會跳出 Error 這個 Layer 來提示。
好,那如果密碼相同的時候,點下 Save 我們就要跳轉到另外一個畫面。
因此我們選擇 Save 這個Layer ,選擇 Tap 這個 Trigger 。
然後就跟前面一樣,我只是要判斷密碼相同,我可以直接複製上方的 Condition 下來。
刪掉 Opacity 並選擇 Jump 這個 Response ,並選責 IoT home 這個 Scene。
Preview 來測試一下,輸入一樣的密碼之後...
跳轉成功!
要來餵貓了,先這樣 ker